<template>
  <div class="app-container">
    <controlNumberDialog :form-dialog="formDialog" :control-number-obj="controlNumberObj" :old-control-number-obj="oldControlNumberObj" @confirmModify="confirmModify" />
    <selectFormDialog :form-dialog="formDialog" :select-form-obj="selectFormObj" :select-form-info="selectFormInfo" @selectFormModify="selectFormModify" />

    <formConDialog v-if="formDialogVisible" :form-dialog="formDialogVisible" />

    <!--顶部搜索框-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="文件名称">
        <el-input v-model="searchForm.fileName" style="width: 200px" placeholder="请输入文件名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" style="margin-left: 10px" @click="searchFileName">搜索</el-button>
      </el-form-item>
    </el-form>
    <!--表格-->
    <el-row>
      <el-col :span="24">
        <el-table :data="recordInfo.records" stripe>
          <el-table-column type="index" label="序号" align="center" />
          <el-table-column label="表单名称" prop="fileName" align="center" />
          <el-table-column label="源表单" prop="parentName" align="center" />
          <el-table-column label="文件控制编号" prop="fileNo" align="center" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="clickControlNumber(scope.row)">控制编号编辑</el-button>
              <!--:disabled="scope.row.parentName!=null?false:true"-->
              <el-button :disabled="scope.row.parentName != null" type="text" @click="toFormCon(scope.row)">表单配置</el-button>
              <el-button v-show="scope.row.parentName == null" type="text" @click="clickSelectForm(scope.row)">选择源表单</el-button>
              <el-button v-show="scope.row.parentName != null" type="text" @click="cancelSelectForm(scope.row)">取消源表单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-pagination
      :current-page="pageData.pageNumber"
      :page-sizes="pageSizeList"
      :page-size="pageData.pageSize"
      :total="recordInfo.total"
      layout="total, sizes, prev, pager, next, jumper"
      style="text-align: right;margin-top: 20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import * as formConfigurationsServer from '@/api/system/formConfigurations'
import commonMixins from '../../../mixins/commonMixins.js'
import controlNumberDialog from './samplingRecord/ControlNumberDialog.vue'
import selectFormDialog from './samplingRecord/SelectFormDialog.vue'
import formConDialog from './samplingRecord/formConDialog.vue'
export default {
  name: 'SamplingRecord',
  components: { controlNumberDialog, selectFormDialog, formConDialog },
  mixins: [commonMixins],
  data() {
    return {
      // 表单配置
      formDialogVisible: false,
      // 搜索
      searchForm: {},
      // 列表数据
      recordInfo: {},
      // 点击控制编号需要传递过去的数据
      controlNumberObj: {},
      oldControlNumberObj: {},

      // 选择源表单弹框
      // 获取表单名称
      selectFormObj: {},
      // 调接口拿到的下拉框
      selectFormInfo: []

    }
  },
  watch: {
    pageData: {
      handler() {
        this.queryRecord()
      },
      deep: true
    }
  },
  created() {
    this.queryRecord()
  },
  methods: {
    // 搜索
    searchFileName() {
      this.queryRecord()
    },
    // 列表的查询
    queryRecord() {
      formConfigurationsServer.queryRecordApi({ fileCode: 'XC', ...this.searchForm, ...this.pageData }).then(res => {
        // console.log("query",res);
        if (res.code == 200 && res.result) {
          this.recordInfo = res.result
        }
      })
    },
    // 点击控制编号编辑按钮函数
    clickControlNumber(row) {
      // console.log(row);
      this.formDialog.controlNumber = true
      this.controlNumberObj = { ...row }
      this.oldControlNumberObj = { ...row }
    },
    // 点击选择源表单按钮函数
    clickSelectForm(row) {
      // console.log(row);
      this.formDialog.selectForm = true
      this.selectFormObj = { ...row }
      formConfigurationsServer.querySelectFormApi({ fileCode: 'XC' }).then(res => {
        // console.log(res.result);
        if (res.code == 200) {
          this.selectFormInfo = res.result
          // let obj=this.selectFormInfo.find(item=>{
          //     return item.id==this.selectFormObj.parentId;
          // });
          // if (this.selectFormObj.fileName ==obj.fileName){
          //     this.selectFormObj.parentId="";
          // }
        }
      })
    },

    // 点击取消源表单按钮函数
    cancelSelectForm(obj) {
      // console.log(obj);
      formConfigurationsServer.updateSelectFormApi({ id: obj.id }).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '取消成功'
          })
          this.queryRecord()
        } else {
          this.$message({
            type: 'success',
            message: '取消失败'
          })
        }
      })
    },

    // controlNumber弹框传递过来的数据
    confirmModify(obj) {
      formConfigurationsServer.updateControlNumberApi({ id: obj.id, fileNo: obj.fileNo }).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.queryRecord()
        } else {
          this.$message({
            type: 'success',
            message: '修改失败'
          })
        }
      })
    },

    // 点击选择源表单修改（子组件源表单修改）
    selectFormModify(obj) {
      const selectFormObj = this.selectFormInfo.find(item => {
        return item.id == obj.parentId
      })
      formConfigurationsServer.updateSelectFormApi({ id: obj.id, parentId: obj.parentId }).then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.queryRecord()
        } else {
          this.$message({
            type: 'success',
            message: '修改失败'
          })
        }
      })
    },

    //  点击表单配置跳转路由
    toFormCon(row) {
      this.$router.push({ name: 'FormConfigurationComponent', params: { rowInfo: row }})
      // this.formDialogVisible = true
    }
  }
}
</script>

<style scoped>

</style>
